<script setup>
import { computed } from 'vue'

const props = defineProps({
  name: { type: String, default: 'fade' },
  duration: { type: Number, default: 420 },
  easing: { type: String, default: 'cubic-bezier(0.22, 1, 0.36, 1)' },
  distance: { type: Number, default: 28 },
  mode: { type: String, default: 'out-in' },
})

const styleVars = computed(() => ({
  '--pt-duration': `${props.duration}ms`,
  '--pt-ease': props.easing,
  '--pt-distance': `${props.distance}px`,
}))
</script>

<template>
  <Transition :name="name" :mode="mode">
    <div class="pt-wrapper" :style="styleVars">
      <slot />
    </div>
  </Transition>
</template>

<style scoped>
</style>